<template>
	<view class="page_bg no_overflow">
		<u-navbar title="氪气中心" titleStyle="color:#333;" :placeholder="false" leftIconColor="#333" :autoBack="true" bgColor="rgba(0,0,0,0)">
			
		</u-navbar>
		<view class="invite_ad">
			<image class="ph" :src="settingData.tk_bg" mode="aspectFill"></image>
			<view class="keqi_info">
				<view class="title">
					我的氪气
					<!-- <u-icon name="arrow-right" color="#333" size="30rpx"></u-icon> -->
				</view>
				<view class="num">
					{{userInfo.tk_token}}
				</view>
				<view class="text">
					分享或充值可获得更多氪气
				</view>
			</view>
			<navigator class="keqi_more" url="/vipPages/keqiInfo/keqiInfo" hover-class="none">
				<text>氪气明细</text>
				<u-icon name="arrow-right" color="#090B15" size="30rpx"></u-icon>
			</navigator>
		</view>
		
		<view class="krypton_topup"  v-if="settingData.ios_wx_pay == 1" >
			<view class="list">
				<view class="item" :class="topupIndex== (index+1)?'hover':''" v-for="(item,index) in settingData.token_recharge" :key="index" @click="selectRecharge(item),topupIndex = index+1">
					<view class="num">
						<image class="ico" src="../../static/img/ico_39.png" mode="widthFix"></image>
						<text>{{item.total_price_of_checking_out*10}}</text>
					</view>
					<view class="name">
						￥{{item.total_price_of_checking_out}}
					</view>
				</view>
			</view>
			<view class="btn"  @click="rechargeToken()">
				<text>￥</text>{{rechargeMoney}} 立即充值
			</view>
			<checkbox-group class="agree" @change="changeCheckbox">
				<label>
					<checkbox value="agree" color="#FFCC33" style="transform:scale(0.6)" />我已阅读并同意
				</label>
				<navigator class="yellow" url="#" hover-class="none" @click="showPromise = true">《氪气付费服务协议》</navigator>
			</checkbox-group>
			<view class="tips">
				温馨提示：氪气不可兑换会员、不可转赠，也不可提现；氪气充值后，不支持退款或反向兑换人民币；充值过程如有问题，请联系客服处理。
			</view>
		</view>
		
		<view class="exchange">
			<view class="title">
				氪气兑换
			</view>
			<view class="list" >
				<view class="item"  v-for="(item,index) in settingData.token_exchange" :key="index">
					<view class="name" v-if="index == 'tk_person_count'">
						形象克隆
					</view>
					<view class="name" v-else-if="index == 'tk_voice_count'">
						高保真声纹
					</view>
					<view class="name" v-else-if="index == 'tk_live_count'">
						场景
					</view>
					<view class="name" v-else-if="index == 'tk_live_video_count'">
						词条
					</view>
					<view class="name" v-else>
						{{index}}
					</view>
					<view class="num">
						<image class="ico" src="../../static/img/ico_39.png" mode="widthFix"></image>
						{{item}}<text>/个</text>
					</view>
					<view class="btn" @click="tokenExchange(item,index)">
						立即兑换
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="exchange">
			<view class="title">
				氪气介绍
			</view>
		</view>
		<view class="bg_radius">
			<image class="tk_images" v-for="(item,index) in settingData.tk_page_images" :key="index" :src="item" mode="widthFix"></image>
		</view>
		
		<view class="footer_none">
			<view class="btn" @click="showCode = true">
				去分享获取积分
			</view>
		</view>
		<view class="footer_yellow_btn" style="display: none;">
			
		</view>
		
		<!-- 二维码 -->
		<u-popup :show="showCode" mode="center" bgColor="transparent" overlayOpacity="0.7" @close="closeCode"
			@open="openCode">
			<view class="share_code">
				<view class="info">
					<image class="ph" :src="codeImg" mode="widthFix"></image>
				</view>
				<view class="btn" @click="downCodeImg">
					下载小程序二维码
				</view>
			</view>
		</u-popup>
		
		<!-- 承诺 -->
		<u-popup :show="showPromise" :closeable="true" mode="center" bgColor="#484848" round="10rpx" :safeAreaInsetBottom="false" @close="closePromise" @open="openPromise">
			<view class="promise">
				<view class="title">
					{{instructions.title}}
				</view>
				<view class="text">
					{{instructions.content}}
				</view>
				<!-- <view class="btn" @click="clickAgree">
					我已知晓，同意
				</view> -->
			</view>
		</u-popup>
		
		<!-- 积分消耗提醒/弹出框 -->
		<u-popup :show="showExpend" mode="center" round="10" :safeAreaInsetBottom="false" @close="closeExpend" @open="openExpend" bgColor="#484848" overlayOpacity="0.7">
			<view class="expend">
				<view class="title">
					积分消耗提示
				</view>
				<view class="text">
					需消耗
				</view>
				<view class="num">
					<image class="ico" src="../../static/img/ico_39.png" mode="widthFix"></image>
					<text>{{exchangeToken}}</text>
				</view>
				<view class="text">
					当前剩余{{userInfo.tk_token}}氪气
				</view>
				
				<view class="btn">
					<view class="btn_item" @click="showExpend = false">
						取消
					</view>
					<view class="btn_item hover" @click="payToken()">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				userInfo: {},
				openid:'',
				settingData: {},
				showCode: false,
				codeImg: '',
				topupIndex: 0,
				showPromise:false,
				rechargeMoney: 0,
				rechargeInfo: {},
				exchangeToken: 0,
				exchangeType: '',
				agreeChecked: 0,
				showExpend: false,
				instructions: {},
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getOpenid()
			this.getReadTextExample()
			this.getVipSettings()
			this.getWechatAcode()
			this.updateUserdata()
		},
		methods: {
			openExpend() {
			  // console.log('open');
			},
			openPromise() {
				// console.log('open');
			},
			closePromise() {
				this.showPromise = false
				// console.log('close');
			},
			
			// 协议
			getReadTextExample(){
				uni.$u.http.get('/api/speed_txt_example/'+this.userId +'?from=miniprogram').then(res => {
					console.log('协议-----',res.data.data)
					this.instructions = res.data.data.terms_agreement
				}).catch(err => {
					console.log(err)
				})
			},
			closeExpend() {
			  this.showExpend = false
			  // console.log('close');
			},
			tokenExchange(item,index){
				this.showExpend = true;
				console.log(index);
				this.exchangeToken = item
				this.exchangeType = index
			},
			payToken(){
				this.showExpend = false;
				if (this.exchangeType == '' || this.exchangeToken == 0) {
					uni.showToast({
						title: '参数错误',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				if (this.userInfo.tk_token < this.exchangeToken) {
					uni.showToast({
						title: '氪气值不足',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				
				uni.$u.http.post('/api/aigc_exchange/' + this.userId + '?from=miniprogram', {
					type: this.exchangeType
				}).then(res => {
					console.log('兑换结果----', res.data.data)
					if (res.data.status == 1) {
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						});
						this.updateUserdata()
					}else{
						uni.showToast({
							title: '兑换失败',
							icon: 'none'
						});
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			selectRecharge(item){
				console.log(item);
				this.rechargeInfo = item;
				this.rechargeMoney = item.total_price_of_checking_out;
			},
			// 获取openid
			getOpenid(){
				const that = this
				wx.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							wx.request({
								url: 'https://www.shenmaio.com/api/wechat_action?from=miniprogram',
								data: {
									code: res.code,
									bid: 888
								},
								success (res) {
								    console.log(res.data.data)
									that.openid = res.data.data
								}
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			changeCheckbox(e) {
				console.log('e----', e.detail.value.length)
				this.agreeChecked = e.detail.value.length
			},
			// 生成支付订单
			rechargeToken() {
				if (this.rechargeMoney == 0) {
					uni.showToast({
						title: '请先选择充值金额',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				
				if (this.agreeChecked == 0) {
					uni.showToast({
						title: '请勾选同意服务协议',
						duration: 2000,
						icon: 'none'
					});
					return
				}
			
				const currentTimestamp = Date.now();
			
				uni.$u.http.post('/api/wechat_order/' + this.userId + '?from=miniprogram', {
					paytype: this.rechargeInfo.paytype,
					pay_token: currentTimestamp,
					total_price_of_checking_out: this.rechargeInfo.total_price_of_checking_out,
					tk_type: this.rechargeInfo.tk_type,
					bid: 888
				}).then(res => {
					console.log('生成支付订单----', res.data.data)
					if (res.data.status == 1) {
						this.postPayData(res.data.data.out_trade_no, res.data.data.amount_to_pay,this.openid)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 线上支付
			postPayData(trade, amount, openid) {
				const that = this
				uni.$u.http.post('/api/pay/' + this.userId + '?from=miniprogram', {
					out_trade_no: trade,
					amount_to_pay: amount,
					openid: openid,
					bid: 888
				}).then(res => {
					console.log('线上支付----', res.data.data)
					if (res.data.status == 1) {
						const resData = res.data.data
						wx.requestPayment({
							timeStamp: resData.timeStamp,
							nonceStr: resData.nonceStr,
							package: resData.package,
							signType: 'MD5',
							paySign: resData.paySign,
							success (res) {
								console.log('线上支付成功----', )
								that.updateUserdata()
							},
							fail (res) {
								console.log('线上支付错误----', )
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 更新用户资料
			updateUserdata(){
				uni.$u.http.post('/api/update_userdata/' + this.userId + '?from=miniprogram', {
					first_name: this.userInfo.first_name
				}).then(res => {
					console.log('更新用户资料----', res.data)
					uni.setStorageSync("userInfo", JSON.stringify(res.data.data));
					//uni.setStorageSync("token", resa.data.data.token);
					//uni.setStorageSync("isLogin", true);
					//uni.setStorageSync("userId", resa.data.data.user_id);
					this.userInfo = res.data.data
					// uni.reLaunch({
					// 	url: "/myPages/create/create"
					// })
				}).catch(err => {
					console.log(err)
				})
			},
			//系统配置接口
			getVipSettings() {
				uni.$u.http.get('/api/vip_settings?from=miniprogram').then(res => {
					console.log('系统配置接口----', res.data.data)
					this.settingData = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			getWechatAcode() {
				uni.$u.http.get('/api/wechat_acode_unlimited/' + this.userId + '?from=miniprogram&bid=888&refresh=0').then(res => {
					console.log('获取推广二维码链接----', res.data)
					this.codeImg = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 保存图片
			downCodeImg() {
				const that = this
				uni.downloadFile({
					url: that.codeImg, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							const tempFilePath = res.tempFilePath;
							// 2. 将图片保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片已保存到相册',
										icon: 'none'
									});
								},
								fail: (err) => {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									});
									console.error('保存失败:', err);
								}
							});
						}
						console.log('下载成功', res);
					}
				});
			},
			openCode() {
				// console.log('open');
			},
			closeCode() {
				this.showCode = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.promise{
		width: 560rpx;
		box-sizing: border-box;
		padding:0 30rpx 35rpx;
		.btn{
			height: 70rpx;
			border-radius: 35rpx;
			background: #F9BE01;
			line-height: 70rpx;
			text-align: center;
			color: #3D3D3D;
			font-size: 26rpx;
			font-weight: 600;
			margin-top: 25rpx;
		}
		.title{
			text-align: center;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			color: #FFFFFF;
			padding:25rpx 0 25rpx;
		}
		.text{
			font-size: 20rpx;
			font-weight: normal;
			line-height: 32rpx;
			color: #FFFFFF;
			text-align: justify;
		}
	}
	
.expend{
	width: 624rpx;
	text-align: center;
	.title{
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		padding:40rpx 0 30rpx;
	}
	.text{
		color: #A1A1A1;
		font-size: 30rpx;
		line-height: 42rpx;
	}
	.num{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;
		.ico{
			flex-shrink: 0;
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
		text{
			display: block;
			font-size: 80rpx;
			color: #FFFFFF;
			line-height: 100rpx;
		}
	}
	
	.btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top:1rpx solid rgba(255, 255, 255, 0.15);
		margin-top: 40rpx;
		.btn_item{
			width: 50%;
			height: 100rpx;
			line-height: 100rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #8C8C8C;
			&:first-child{
				border-right:1rpx solid rgba(255, 255, 255, 0.15);
			}
			&.hover{
				color: #F9BE01;
			}
		}
	}
}
.exchange{
	padding:40rpx 40rpx 20rpx;
	.title{
		font-size: 30rpx;
		line-height: 45rpx;
		color:#fff;
	}
	.list{
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;
		.item{
			width: 320rpx;
			height: 330rpx;
			background: #1F1F1F;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-top: 30rpx;
			.name{
				font-size: 30rpx;
				line-height: 40rpx;
			}
			.num{
				display: flex;
				align-items: center;
				justify-content: center;
				padding:25rpx 0 45rpx;
				font-size: 50rpx;
				line-height: 50rpx;
				.ico{
					flex-shrink: 0;
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				text{
					display: block;
					padding-left:10rpx;
					font-size: 26rpx;
					line-height: 30rpx;
				}
			}
			.btn{
				width: 180rpx;
				height: 60rpx;
				border-radius: 10rpx;
				background: #FFB200;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #000000;
			}
		}
	}
}
.krypton_topup{
	padding:40rpx 40rpx 0;
	.title{
		font-size: 30rpx;
		line-height: 45rpx;
		color:#fff;
	}
	.tips{
		color: #7F7F83;
		font-size: 22rpx;
		line-height: 36rpx;
		padding:30rpx 0;
		border-bottom:1px solid #323232;
	}
	.btn{
		width: 670rpx;
		height: 88rpx;
		border-radius: 44rpx;
		background: #F9BE01;
		font-size: 32rpx;
		color: #000;
		text-align: center;
		line-height: 88rpx;
		margin-top: 20rpx;
		text{
			font-size: 22rpx;
		}
	}
	.agree {
		margin-top: 35rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		label {
			display: flex;
			align-items: center;
			color: #7F7F83
		}
		.yellow {
			color: #B4B4B9
		}
	}
	.list{
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: wrap;
		.item{
			width: 210rpx;
			height: 180rpx;
			border-radius: 15rpx;
			background: #1F1F1F;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			border: 2rpx solid #1F1F1F;
			&.hover{
				border: 2rpx solid #FFFFFF;
			}
			.name{
				color: #7F7F83;
				font-size: 24rpx;
				line-height: 30rpx;
				margin-top: 20rpx;
			}
			.num{
				display: flex;
				align-items: center;
				justify-content: center;
				padding-right: 20rpx;
				padding-top: 10rpx;
				.ico{
					flex-shrink: 0;
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 40rpx;
					line-height: 40rpx;
				}
			}
		}
		
	}
}
.share_code {
	.info {
		width: 590rpx;
		border-radius: 20rpx;
		background: #505050;
		padding: 45rpx;
		box-sizing: border-box;

		.ph {
			width: 100%;
			border-radius: 20rpx;
		}
	}

	.btn {
		width: 590rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 45rpx;
		background: #FFB200;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		margin-top: 30rpx;
	}
}
.tk_images{
	width: 100%;
}
.page_bg{
	background: #000;
	min-height: 100vh;
}
.invite_ad{
	width: 100%;
	height: 484rpx;
	position: relative;
	.keqi_more{
		position: absolute;
		right: 30rpx;
		bottom: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding:20rpx 30rpx;
		border-radius: 55rpx;
		box-sizing: border-box;
		border: 2rpx solid #090B15;
		text{
			display: block;
			color: #090B15;
			font-size: 30rpx;
			line-height: 30rpx;
		}
	}
	.ph{
		display: block;
		width: 100%;
		height: 484rpx;
	}
	.keqi_info{
		position: absolute;
		left:0;
		bottom: 100rpx;
		right: 0;
		color:#333;
		box-sizing: border-box;
		padding:0 40rpx;
		.title{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #090B15;
		}
		.num{
			font-size: 80rpx;
			font-weight: bold;
			line-height: 120rpx;
			color: #25242E;
		}
		.text{
			font-size: 22rpx;
			font-weight: normal;
			line-height: 30rpx;
			color: rgba(0, 0, 0, 0.4);
		}
	}
}
.bg_radius{
	position: relative;
	z-index: 9;
	margin-top: -20rpx;
	border-radius: 20rpx;
	background: #000;
	padding:0 30rpx;
}
.footer_none{
	margin-top: 40rpx;
	padding-left: 40rpx;
	padding-right: 40rpx;
	height: 200rpx;
	text-align: center;
	.btn{
		height: 76rpx;
		border-radius: 35rpx;
		background: #F9BE01;
		line-height: 76rpx;
		text-align: center;
		font-size: 30rpx;
		color: #292D32;
		font-weight: 600;
	}
}
.footer_yellow_btn{
	position: fixed;
	left:0rpx;
	right: 0rpx;
	bottom: 0rpx;
	z-index: 99;
	padding:30rpx 46rpx 60rpx;
	
}
</style>
